<template>
  <div class="t_shenbaoxuzhi">
    <div class="t_mage_nav">
      <div class="t_nav_three">
        <a class="t_nav_hover" href="#" style="margin-right: 15px;" @click="toInformEditor">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jiahao"></use>
                        </svg>
                    </span>
          新建公告
        </a>

        <a class="t_nav_hover" href="#" style="margin-right: 15px;" @click="update">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-a-bianji_edit1"></use>
                        </svg>
                    </span>
          修改
        </a>
        <span class="t_nav_hover"  @click="deleteEvents">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-delete-one"></use>
                        </svg>
                    </span>
          删除
        </span>
      </div>
      <div class="t_nav_search">
        <a href="#" class="t_searchImg" style="font-size: 22px;">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-search"></use>
          </svg>
        </a>
        <input type="text" v-model="search" placeholder="输入关键信息" @blur="searchRequest" @keyup.enter="searchRequest">
      </div>
    </div>
    <div class="t_mage">
      <div class="t_mage_info">
        <ul>
          <li class="t_mage_li_hover" v-for="(item,index) in announcement">
            <div class="t_info_content">
              <div class="t_info_choice">
                <input class="t_checkbox" type="checkbox" :value="item.id" @click="change($event,item.id,index)"/>
<!--                <label class="t_checkbox" ></label>-->
              </div>
              <div class="t_info_notice">
                <div style="font-size: 16px;">
                  <a href="#" class="ov">{{ item.title }}</a>
                  <span>{{ item.createUser }}</span>
                </div>
                <div style="font-size: 13px;">
                  <a href="#" class="ov">{{ item.absrtact }}</a>
                  <span>{{ item.createItme }}</span>
                </div>
              </div>
            </div>
            <div class="t_last_div"></div>
          </li>
        </ul>
      </div>
      <div class="t_paging">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="pageNum"
          @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery"
import '../js/InformIcon'
import Inform from '../js/Inform'
export default {
  inject: ['reload'],
  name: "InformNotice",
  data(){
    return{
      search: "",
      //删除条件，id数组
      chooseIds:[],
      //总页数
      pageNum: 0,
      //公告对象
      announcement: [
        {},
      ]
    }
  },
  methods: {
    searchRequest(){
      this.$axios({
        url: "/announcement/getAnnouncementByTitle",
        method: "get",
        params: {
          search: this.search,
          index: 0
        }
      }).then(res=>{
        this.announcement = res.data
      })

      this.$axios({
        url: "/announcement/getAnnouncementByTitleSize",
        params:{
          search: this.search,
        },
        method: "get",
      }).then(res=>{
        this.pageNum = res.data
      })
    },
    pageChange(pageIndex){
      this.chooseIds = []
      $(".t_checkbox").prop("checked",false);
      $(".t_last_div").css({"background-color": "#fff"})
      this.$axios({
        url: "/announcement/getAnnouncementByTitle",
        method: "get",
        params: {
          search: this.search,
          index: pageIndex-1
        }
      }).then(res=>{
        this.announcement = res.data
      })
    },
    //选项卡点击事件
    change(e,itemId,index){
      let _this = this
      if (e.target.checked){
        _this.chooseIds.push(itemId)
        $(".t_last_div").eq(index).css({
          "background-color": "#00CD79"
        })
      } else {
        _this.chooseIds.forEach(function (item,index) {
          if (item==itemId){
            _this.chooseIds.splice(index,1)
          }
        })
        $(".t_last_div").eq(index).css({
          "background-color": "#fff"
        })
      }
    },
    //删除选项卡事件
    deleteEvents(){
      if(this.chooseIds.length==0){
        this.$message.error("请选择！")
        return;
      }
      this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: "/announcement/delete",
          method: "post",
          data: this.chooseIds
        }).then(res=>{
          if (res.data){
            this.reload()
          } else {
            this.$message.error("删除失败")
          }
        }).catch(()=>{
          this.$message.error("删除失败")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    remove(){
      if(this.chooseIds.length==0){
        this.$message.error("请选择！")
        return;
      }
      this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: "/announcement/delete",
          method: "post",
          data: this.chooseIds
        }).then(res=>{
          if (res.data){
            this.reload()
            this.$message.info("删除成功")
          } else {
            this.$message.error("删除失败")
          }
        }).catch(()=>{
          this.$message.error("删除失败")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //修改公告内容事件
    update(){
      if (this.chooseIds.length==1){
        this.$router.push({name: 'informEditor',params: {id: this.chooseIds[0]}})
      } else {
        this.$message.error("只能选择一个公告进行修改！")
      }
    },
    toInformEditor(){
      this.$router.push("/informEditor")
    },
    pageClick(count){
      this.requestPageIndex = count
      $(".page").removeClass("pageChecked")
      $(".page").eq(count-1).addClass("pageChecked")
    },
    nextPage(){
      if (this.requestPageIndex>=this.pageNum){
        return;
      }
      this.requestPageIndex++;
      this.pageClick(this.requestPageIndex)
    },
  },
  created() {
    this.searchRequest()
  }
}
</script>

<style src="../css/InformNotice.css" scoped></style>
<style src="../css/pageSplit.css" scoped></style>
<style scoped>
.ov{
  width: 90%;
  display:-webkit-box;/*设置为弹性盒子*/
  overflow:hidden;/*超出隐藏*/
  text-overflow:ellipsis;/*显示省略号*/
  -webkit-line-clamp:1;/*多少行后显示省略号，这里设置为第一行超出后显示省略号*/
  word-break:break-all;/*强制英文单词自动换行,可要可不要*/
  -webkit-box-orient: vertical; /* 从上到下垂直排列子元素*/
}
</style>
